<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>魅族科技</title>
		<style type="text/css">
		 	*{
		 		margin: 0px;
		 		padding: 0px;
		 	}
  			.web{
  				width: 100%;
  				height: 760px;
  				position: relative;
  			}
			.pic li{
				width: 100%;
				height: 760px;
				display: none;
			}
			.nav{
				width: 150px;
				height: 19px;
				position: absolute;
				bottom:20px;
				left: 50%;
				margin-left: -75px;
			}
			.nav li{
				list-style: none;
				width: 15px;
				height: 15px;
				border: 2px solid white;
				float: left;
				margin-left: 16px;
				border-radius: 15px;
				cursor: pointer;
			}
			.bg{
				background: white;
			}
		</style>
	</head>
	<body>
		<div class="web">
			<div class="pic">
				<ul>
					<li style="background:url(images/1.jpg) center; display:block;"></li>
					<li style="background:url(images/2.jpg) center"></li>
					<li style="background:url(images/3.jpg) center"></li>
					<li style="background:url(images/4.jpg) center"></li>
				</ul>
			</div>	
			<div class="nav">
			<ul>
				<li class="bg"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		    </div>		
		</div>
		<script src="jquery.js"></script>
		<script>
			var i=0;//设置下标
			$('.nav ul  li').click(function(){
				i=$(this).index();

				$('.pic ul li').eq(i).fadeIn(30).siblings().fadeOut(30);
				$(this).addClass('bg').siblings().removeClass('bg');
			})

			function timer(){
				i+0;
				if(i<3){
					i++;
				}else{
					i=0;
				}
				$('.pic ul li').eq(i).fadeIn(30).siblings().fadeOut(30);
				$('.nav ul li').eq(i).addClass('bg').siblings().removeClass('bg');
			}
			setInterval('timer()',3000)
		</script>
	</body>
</html>